<%@ page import="ar.com.photo_admin.domain.PurchaseOrder" %>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">
	<r:require module="export"/>
	
</head>
<body>
	<div class="page-header">
		<h1>
			<g:message code="purchase.title" />
		</h1>
	</div>
	<g:isPurchaseOrderAllowed orderId="${purchaseOrderInstance?.id}">
		
		<g:if test="${flash.message}">
			<div class="alert alert-success">  
			  <a class="close" data-dismiss="alert">×</a>  
			  <div class="message">${flash.message}</div>  
			</div>  
		</g:if>
		
		<h2><g:message code="purchase.summary" /></h2>
		
		<div class="row">
			<div class="span6">										
				<div class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="date"><g:message code="purchase.date" /></label>					
						<div class="controls">							
							<input type="text" id="date" value="${purchaseOrderInstance.dateCreated.format('dd-MM-yyyy')}" disabled>
						</div>
					</div>				
					<div class="control-group">
						<label class="control-label" for="photographer"><g:message code="purchase.photographer" /></label>					
						<div class="controls">							
							<input type="text" id="photographer" value="${purchaseOrderInstance.photographer}" disabled>
						</div>
					</div>								
					<div class="control-group">
						<label class="control-label" for="user"><g:message code="purchase.client" /></label>					
						<div class="controls">
							<input type="text" id="user" value="${purchaseOrderInstance.client}" disabled>
						</div>
					</div>
				</div>
			</div>
			<div class="span6">										
				<div class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="price"><g:message code="purchase.price" /></label>					
						<div class="controls">							
							<input type="text" id="price" value="${purchaseOrderInstance.price}" disabled>
						</div>
					</div>				
					
					<div class="control-group">
						<label class="control-label" for="copies"><g:message code="purchase.photos.size" /></label>					
						<div class="controls">
							<input type="text" id="copies" value="${purchaseOrderInstance.amountCopies}" disabled>
						</div>
					</div>
					
					
					<div class="control-group">
						<label class="control-label" for="MPstatus"><g:message code="purchase.MPstatus" /></label>					
						<div class="controls">
							<input type="text" id="MPstatus" value="${purchaseOrderInstance.state.showDescription()}" disabled>
						</div>
					</div>
					
					<g:form name="cancelForm" controller="purchaseOrder" action="cancelOrder" id="${purchaseOrderInstance.id}"></g:form>
					<g:form name="finishForm" controller="purchaseOrder" action="finishOrder" id="${purchaseOrderInstance.id}"></g:form>	
					<g:form name="refundForm" controller="purchaseOrder" action="refundOrder" id="${purchaseOrderInstance.id}"></g:form>
					
					<div class="row centered">
					
						<div class="btn-group">		
							<g:isOrderCancellableDisplayed purchaseOrderId="${purchaseOrderInstance.id}">														
								<button class="btn btn-info " data-toggle="modal" data-target="#cancelPopup" > 
									<g:message code="order.cancel" />
								</button>							
							</g:isOrderCancellableDisplayed>
							
							<g:isOrderRefundableDisplayed purchaseOrderId="${purchaseOrderInstance.id}">																	
								<button id="btnOrder" class="btn btn-info " data-toggle="modal" data-target="#refundPopup">
									<g:message code="order.refund" />
								</button>
																				
							</g:isOrderRefundableDisplayed>				
							
							<g:isOrderFinalizableDisplayed purchaseOrderId="${purchaseOrderInstance.id}">																					
								<button id="btnOrder" class="btn btn-info " data-toggle="modal" data-target="#finishPopup">
									<g:message code="order.finish" />
								</button>											
							</g:isOrderFinalizableDisplayed>
						</div>	
					</div>		
																		
				</div>
			</div>						
		</div>
		
		<div class="separatorUsingBorder"></div>

		<h2>
			<g:message code="purchase.order" />
		</h2>
		
		<export:formats formats="['csv', 'excel', 'ods', 'pdf']" params='[id: "${purchaseOrderInstance?.id}"]' />
		
		<div class="separator"></div>
		
		<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" class="row">		
			<table class="table table-striped " >
				<thead>
					<tr>					
						<g:sortableColumn property="photo.id" title="${message(code: 'purchase.thumbnailUrl')}" />
						<g:sortableColumn property="photo.name" title="${message(code: 'purchase.photo.name')}" />																	
						<g:sortableColumn property="amountCopies" title="${message(code: 'purchase.photos.size')}" />
						<g:sortableColumn property="size" title="${message(code: 'purchase.size')}" />
						<g:sortableColumn property="paperType" title="${message(code: 'purchase.paper')}" />
						<g:sortableColumn property="paperBorder" title="${message(code: 'purchase.border')}" />
					</tr>
				</thead>
				<tbody >
				<g:each in="${purchaseOrderItemsList}" status="i" var="purchaseOrderInstanceItem">
					<tr>
						
						<td style="vertical-align:middle">
							<div class="gridPhotoContainer">
								<a rel="gallery" class="preview" href="${purchaseOrderInstanceItem.photo.getUrl()}">
									<img class="gridPhotoImage" src="${purchaseOrderInstanceItem.photo.getThumbnailUrl()}">
								</a>
							</div>
						</td>										
						<td style="vertical-align:middle">${fieldValue(bean: purchaseOrderInstanceItem, field: "photo.name")}</td>						
						<td style="vertical-align:middle">${fieldValue(bean: purchaseOrderInstanceItem, field: "amountCopies")}</td>																
						<td style="vertical-align:middle">${fieldValue(bean: purchaseOrderInstanceItem, field: "size")}</td>						
						<td style="vertical-align:middle">${fieldValue(bean: purchaseOrderInstanceItem, field: "paperType.description")}</td>						
						<td style="vertical-align:middle">${fieldValue(bean: purchaseOrderInstanceItem, field: "paperBorder.description")}</td>											
					</tr>
				</g:each>
				</tbody>
			</table>
			
		</div>
				
	</g:isPurchaseOrderAllowed>
	
	<g:render template="/common/successConfirmationPopup" model='[button_text:"${message(code: 'order.cancel')}", msg:"${message(code: 'order.cancel.confirmation.message')}", popup_id:"cancelPopup", button_id:"btn_orderCancel"]'/>
	<g:render template="/common/successConfirmationPopup" model='[button_text:"${message(code: 'order.refund')}", msg:"${message(code: 'order.refund.confirmation.message')}", popup_id:"refundPopup", button_id:"btn_orderRefund"]'/>
	<g:render template="/common/successConfirmationPopup" model='[button_text:"${message(code: 'order.finish')}", msg:"${message(code: 'order.finish.confirmation.message')}", popup_id:"finishPopup", button_id:"btn_orderFinish"]'/>
	<g:render template="/common/modalImageGallery" model="${[addToCartVisibility: false]}" />
		
	<g:javascript src="imagePreview.js" />
	
	
	
	<script type="text/javascript">
	jQuery(document).ready(function(){	
		// Se llama al fw que hace que con on hover se visualice la imagen
		imagePreview();
		
		$('.export').removeClass("export").addClass("btn-group");
		$('.menuButton').addClass("btn");
		$('.menuButton > a').css("text-decoration", "none");


		jQuery('#btn_orderCancel').click(function () {					
			jQuery('#cancelForm').submit();
		});

		jQuery('#btn_orderRefund').click(function () {										
			jQuery('#refundForm').submit();
		});

		jQuery('#btn_orderFinish').click(function () {										
			jQuery('#finishForm').submit();
		});


		
   	});
    </script>	
</body>
</html>
